<template>
  <div id="main" ref="echartDom"></div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted, onUnmounted, ref } from "vue";

// 基于准备好的dom，初始化echarts实例
const echartDom = ref(null);
let myChart = null;
onMounted(() => {
  //获取大小
  myChart = echarts.init(echartDom.value);
  // 绘制图表
  myChart.setOption({
    title: {
      text: "雷达",
    },
    radar: {
      // shape: 'circle',
      indicator: [
        { name: "Sales", max: 6500 },
        { name: "Administration", max: 16000 },
        { name: "Information Technology", max: 30000 },
        { name: "Customer Support", max: 38000 },
        { name: "Development", max: 52000 },
        { name: "Marketing", max: 25000 },
      ],
    },
    series: [
      {
        name: "Budget vs spending",
        type: "radar",
        data: [
          {
            value: [4200, 3000, 20000, 35000, 50000, 18000],
            name: "Allocated Budget",
          },
          {
            value: [5000, 14000, 28000, 26000, 42000, 21000],
            name: "Actual Spending",
          },
        ],
      },
    ],
  });
});
window.addEventListener("resize", () => {
  //页面变化重新加载
  myChart && myChart.resize();
});
onUnmounted(() => {
  myChart && myChart.dispose();
});
</script>

<style scoped lang="less">
#main {
  width: 100%;
  height: 300px;
  padding-top: 10px;
  margin: 0;
}
</style>
